<!--
- Author:  LiShibin.
- Date:    2017/7/11 0011.
- File:    add.
-->
<template>
  <div>
    <div style="padding-top: 60px;" class="Web_Box">
      <div class="Topmenu">
        <i @click="back" class="iconfont icon-youjiantou"><a href=""></a></i>
        <h1>编辑收件人</h1>
        <span></span>
      </div>
      <div>
        <div class="shouhuoren">
          <ul>
            <li><span class="xinxi">收货姓名</span><input v-model="addressEdit.true_name" type="text"> </li>
            <li><span class="xinxi">手机号码</span><input v-model="addressEdit.mob_phone" type="tel"> </li>
            <li @click="switchAreaSelectShow">
              <span class="xinxi">所在地区</span>
              <i class="iconfont icon-youjiantou-copy"></i>
              <input style="width: 85%;float: right;pointer-events: none;padding-left: 1.5rem;" v-model="addressEdit.area_info" type="text">
            </li>
            <li><span class="xinxi">详细地址</span><input  v-model="addressEdit.address" type="text"> </li>
          </ul>
          <ul class="mt43rem">
            <li><span class="xinxi">设置为默认收货地址</span>
              <span @click="switchAddressDefault(false)" :class="{'on': addressEdit.is_default == 1}" class="dizhibtn"> <span class="dizhibtn1"></span> </span>
            </li>
          </ul>
        </div>
        <div class="login_btn1" style="padding: 3rem 10px;">
          <span @click="save">保存</span>
        </div>
      </div>
    </div>
    <vue-area :props-show="areaSelectShow" :props-result="result" v-on:result="areaResult"></vue-area>

    <!--<back-nav></back-nav>-->
  </div>
</template>

<script>
  import vueArea from '../../components/area'
  import * as validator from '../../validator'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({addressList: 'addressList'}),
      mapRules({once: 'addressList'})
    ],
    data() {
      return {
        result: null,
        areaSelectShow: false,
        addressId: this.$route.params.id,
        addressIndex: -1,
        addressEdit: {
          address: '',
          area_id: '',
          area_info: '',
          city_id: '',
          mob_phone: '',
          prov_id: '',
          tel_phone: '',
          true_name: '',
          ycode: '',
          is_default: '0'
        },
        areaTxt: '北京'
      }
    },
    components: {
      'vue-area': vueArea
    },
    created() {
      this.initAddressEdit()
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      switchAddressDefault() {
        this.addressEdit.is_default = this.addressEdit.is_default == '1' ? '0' : '1'
      },
      switchAreaSelectShow(boolValue) {
        this.areaSelectShow = boolValue
      },
      initAddressEdit() {
        for (let i = 0; i < this.addressList.data.length; i++) {
          if (this.addressList.data[i].address_id == this.addressId) {
            this.addressEdit = this.$utils.clone(this.addressList.data[i])
            this.addressIndex = i
            break
          }
        }
      },
      areaResult(areaSelectShow, result) {
        this.areaSelectShow = areaSelectShow
        this.result = result
        this.addressEdit.prov_id = result.province.code
        this.addressEdit.city_id = result.city.code
        this.addressEdit.area_id = result.area.code
        this.addressEdit.area_info = result.province.name + ' ' + result.city.name + ' ' + result.area.name
      },
      save() {
        if (this.addressEdit.true_name === '') {
          this.$toast('请输入姓名')
          return
        }
        if (!validator.phone(this.addressEdit.mob_phone)) {
          this.$toast('请输入正确的手机号')
          return
        }
        if (this.addressEdit.area_id === '') {
          this.$toast('请选择所在地区')
          return
        }
        if (this.addressEdit.address === '') {
          this.$toast('请输入详细地址')
          return
        }
        this.$request.updateAddress(this.addressEdit).then(data => {
          this.addressList.data[this.addressIndex] = this.addressEdit
          if (this.addressEdit.is_default == '1') { // 是默认地址，需去除其他默认地址
            for (let i = 0; i < this.addressList.data.length; i++) {
              if (i != this.addressIndex) {
                this.addressList.data[i].is_default = '0'
              }
            }
          }
          this.$toast('更新收货地址成功')
          this.$router.go(-1)
        })
      }
    }
  }
</script>

<style>
  .is-danger {
    border: 1px solid red !important;
  }
  .dizhibtn{position: relative;}
  .dizhibtn1{transition: all 0.5s;position: absolute;top: 0;left: 0;}
  .on .dizhibtn1{background-color: #e3c143;left: 1.2rem;}
</style>
